<template>
    <view style="margin-bottom:200rpx">
        <view class="header" v-if="addressList.length == 0" @tap="changeAddress">
            <view style="line-height:100rpx">请选择收货地址</view>
            <view class="iconfont icon-xiangyou" style="line-height:100rpx;margin-right:70rpx;color:#333333"></view>
        </view>
        <view v-else>
            <block v-for="(item, index) in addressList" :key="index">
                <view class="header" v-if="addressId == '' ? item.is_default == 1 : item.id == addressId" @tap="changeAddress">
                    <view>
                        <view class="user-info">
                            <view class="address-mark" v-if="item.is_default == true">默认</view>
                            <view class="user-name-phone">{{item.contacts}} {{item.phone}}</view>
                        </view>
                        <view class="address">{{item.province + item.city + item.area + item.full_address}}</view>
                    </view>
                    <view class="iconfont icon-xiangyou" style="line-height:100rpx;margin-right:70rpx;color:#333333"></view>
                </view>
            </block>
        </view>
        <view v-if="type == 1 || type == 3">
            <view class="order-detail">
                <view class="order-img">
                    <img :src="commidtyInfo.commodity_image_thum" alt="" style="width:100%;height:100%">
                </view>
                <view class="order-info">
                    <view class="order-info-item">
                        <view style="color:#333333;font-size:36rpx">{{commidtyInfo.spu_name}}</view>
                        <block v-for="(item, index) in commidtyInfo.sku" :key="index">
                            <view style="color:#666666;font-size:28rpx" v-if="item.id == sku_id">{{item.sku_name}}</view>
                        </block>
                    </view>
                    <view class="order-info-item">
                        <block v-for="(item, index) in commidtyInfo.sku" :key="index">
                            <view v-if="item.id == sku_id">
                                <text style="color:#FF1E1E;font-size:38rpx">￥{{item.activity_price}}</text>
                                <text style="color:#999999;font-size:26rpx;text-decoration: line-through;margin-left:31rpx">￥{{item.price}}</text>
                            </view>
                        </block>
                        <view class="iconfont icon-chenghao" style="color:#666666;font-size:28rpx">{{commidtyNum}}</view>
                    </view>
                    <view class="order-info-item" style="color:#999999;font-size:26rpx">{{commidtyInfo.sales_volume}}人已买</view>
                </view>
            </view>
            <view class="order-other-info">
                <view class="other-info-item" style="padding-right:50rpx">
                    <view>购买数量</view>
                    <view class="choose-num">
                        <!-- <view class="choose-num-reduce" @tap="reduceNum">
                            <img src="../../static/-.png" alt="" style="width:100%;height:100%">
                        </view> -->
                        <view class="choose-num-total">{{commidtyNum}}</view>
                        <!-- <view class="choose-num-add" @tap="addNum">
                            <img src="../../static/+.png" alt="" style="width:100%;height:100%">
                        </view> -->
                    </view>
                </view>
                <view class="other-info-item" style="padding-right:50rpx">
                    <view>配送费</view>
                    <view>{{parseInt(commidtyInfo.postage) == 0 ? '包邮' : '￥' + parseInt(commidtyInfo.postage)}}</view>
                </view>
                <!-- <view class="other-info-item" style="padding-right:55rpx">
                    <view>订单备注</view>
                    <view>
                        <input type="text" placeholder="选填" placeholder-style="color:#999999;font-size:28rpx;text-align:right" @blur="remarkChange">
                    </view>
                </view> -->
            </view>
        </view>
        <view v-if="type == 2">
            <blcok v-for="(item, index) in allSelectedGoods" :key="index">
                <view class="order-detail">
                    <view class="order-img">
                        <img :src="item.spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="order-info">
                        <view class="order-info-item">
                            <view style="color:#333333;font-size:36rpx">{{item.spu.spu_name}}</view>
                            <block v-for="(item2, index2) in item.spu.sku" :key="index2">
                                <view style="color:#666666;font-size:28rpx" v-if="item2.id == item.sku_id">{{item2.sku_name}}</view>
                            </block>
                        </view>
                        <view class="order-info-item">
                            <block v-for="(item3, index3) in item.spu.sku" :key="index3">
                                <view v-if="item3.id == item.sku_id">
                                    <text style="color:#FF1E1E;font-size:38rpx">￥{{item3.activity_price}}</text>
                                    <text style="color:#999999;font-size:26rpx;text-decoration: line-through;margin-left:31rpx">￥{{item3.price}}</text>
                                </view>
                            </block>
                            <view class="iconfont icon-chenghao" style="color:#666666;font-size:28rpx">{{item.number}}</view>
                        </view>
                        <view class="order-info-item" style="color:#999999;font-size:26rpx">{{item.spu.sales_volume}}人已买</view>
                    </view>
                </view>
                <view class="order-other-info">
                    <view class="other-info-item" style="padding-right:50rpx">
                        <view>购买数量</view>
                        <view class="choose-num">
                            <!-- <view class="choose-num-reduce" @tap="reduceNum">
                                <img src="../../static/-.png" alt="" style="width:100%;height:100%">
                            </view> -->
                            <view class="choose-num-total">{{item.number}}</view>
                            <!-- <view class="choose-num-add" @tap="addNum">
                                <img src="../../static/+.png" alt="" style="width:100%;height:100%">
                            </view> -->
                        </view>
                    </view>
                    <view class="other-info-item" style="padding-right:50rpx">
                        <view>配送费</view>
                        <view>{{parseInt(item.spu.postage) == 0 ? '包邮' : '￥' + parseInt(item.spu.postage)}}</view>
                    </view>
                    <!-- <view class="other-info-item" style="padding-right:55rpx">
                        <view>订单备注</view>
                        <view>
                            <input type="text" placeholder="选填" placeholder-style="color:#999999;font-size:28rpx;text-align:right" @blur="remarkChange">
                        </view>
                    </view> -->
                </view>
            </blcok>
        </view>
        <view class="bottom" v-if="type == 1 || type == 3">
            <view class="bottom-button" @tap="submitOrder">提交订单</view>
            <block  v-for="(item, index) in commidtyInfo.sku" :key="index">
                <view style="color:#FF1E1E;font-size:32rpx;margin-right:25rpx" v-if="item.id == sku_id">￥{{item.activity_price * commidtyNum + parseInt(commidtyInfo.postage)}}</view>
            </block>
            <view style="color:#333333;font-size:28rpx;margin-right:25rpx">合计：</view>
            <view style="color:#999999;font-size:24rpx;margin-right:25rpx">共{{commidtyNum}}件</view>      
        </view>
        <view class="bottom" v-if="type == 2">
            <view class="bottom-button" @tap="submitOrder">提交订单</view>
            <view style="color:#FF1E1E;font-size:32rpx;margin-right:25rpx">￥{{totalPrice}}</view>
            <view style="color:#333333;font-size:28rpx;margin-right:25rpx">合计：</view>
            <view style="color:#999999;font-size:24rpx;margin-right:25rpx">共{{allSelectedGoods.length}}件</view>      
        </view>
        <pay :showPay="showPay" @close="closePayType" :orderData="orderData"></pay>
    </view>
</template>

<script>
import pay from '@/components/pay/pay'
import { UserModel } from '../../model/user'
import { OrderModel } from '../../model/order'
import { CartModel } from '../../model/cart'
const userModel = new UserModel()
const orderModel = new OrderModel()
const cartModel = new CartModel()
export default {
    components: {
        pay
    },
    data() {
        return {
            PayType: '',
            showPay: false,
            orderData: {},
            addressList: [],
            addressId: '',
            defaultAddressId: '',
            isHaveDefaultAddress: null,
            commidtyInfo: [],
            commidtyNum: 0,
            sku_id: '',
            remark: '',
            type: 0, // 是那种方式添加订单
            allSelectedGoods: [],
            cart_ids: [],
            groupType: 0,
            groupId: '',  // 参加拼团的ID,
            totalPrice: 0  
        }
    },
    methods: {
        getUserAddress() {
            userModel.getUserAddress().then((res) => {
                if(res.code == 200) {
                    this.addressList = res.data
                    console.log(this.addressList)
                    this.addressList.forEach((item) => {
                        if(item.is_default == 1) {
                            this.defaultAddressId = item.id
                        }
                    })
                    // this.isHaveDefaultAddress = this.addressList.every((item) => {
                    //     return item.is_default == 1
                    // })
                    // console.log(this.isHaveDefaultAddress)
                }
            })
        },
        changeAddress() {
            uni.navigateTo({
                url: '/pagesD/shipping-address/shipping-address?chooseAddress=true'
            })
        },
        closePayType(data) {
            this.PayType = data
            this.showPay = false
        },
        reduceNum() {
            if(this.commidtyNum > 1) {
                this.commidtyNum = this.commidtyNum - 1
            }else {
                uni.showToast({
                    title: '至少购买一件商品',
                    icon: 'none'
                })
            }
        },
        addNum() {
            this.commidtyNum = this.commidtyNum + 1
        },
        submitOrder() {
            if(this.type == 1) {
                let data = {
                    address_id: this.addressId == '' ? this.defaultAddressId : this.addressId,
                    sku_id: this.sku_id,
                    num: this.commidtyNum
                }
                console.log(data)
                orderModel.addOrder(data).then((res) => {
                    if(res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'success'
                        })
                        this.showPay = true
                        this.orderData = { order_id: res.data.order_id, type: this.type, price: this.totalPrice, commidty_type: this.commidtyInfo.commodity_type }
                        console.log(this.orderData)
                    }
                })
            }else if(this.type == 2) {
                let data = {
                    cart_ids: JSON.stringify(this.cart_ids),
                    address_id: this.addressId == '' ? this.defaultAddressId : this.addressId
                }
                console.log(data)
                cartModel.addCartOrder(data).then((res) => {
                    if(res.code == 201) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'success'
                        })
                        this.showPay = true
                        this.orderData = { internal_payment_sn: res.data.internal_payment_sn, type: this.type, price: this.totalPrice, commidty_type: 0 }
                    }
                })
            }else if(this.type == 3) {
                if(this.groupType == 1) {
                    let data = {
                        address_id: this.addressId == '' ? this.defaultAddressId : this.addressId,
                        sku_id: this.sku_id,
                        num: this.commidtyNum,
                        group_buy_type: this.groupType
                    }
                    console.log(data)
                    orderModel.addOrder(data).then((res) => {
                        if(res.code == 200) {
                            uni.showToast({
                                title: res.msg,
                                icon: 'success'
                            })
                            this.showPay = true
                            this.orderData = { order_id: res.data.order_id, type: this.type, price: this.totalPrice, commidty_type: this.commidtyInfo.commodity_type }
                            console.log(this.orderData)
                        }
                    })
                }else if(this.groupType == 2) {
                    let data = {
                        address_id: this.addressId == '' ? this.defaultAddressId : this.addressId,
                        sku_id: this.sku_id,
                        num: this.commidtyNum,
                        group_buy_type: this.groupType,
                        group_buy_id: this.groupId
                    }
                    console.log(data)
                    orderModel.addOrder(data).then((res) => {
                        if(res.code == 200) {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            })
                            this.showPay = true
                            this.orderData = { order_id: res.data.order_id, type: this.type, price: this.totalPrice, commidty_type: this.commidtyInfo.commodity_type }
                            console.log(this.orderData)
                        }else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            })
                        }
                    })
                }
            }
        }
    },
    onLoad(option) {
        this.type = parseInt(option.type)
        this.groupType = parseInt(option.groupType)
        this.groupId = parseInt(option.groupId)
        if(option.type == 1 || option.type == 3) {
            this.commidtyInfo = JSON.parse(option.commidtyDetail)
            // console.log(this.commidtyInfo)
            this.commidtyNum = parseInt(option.commidtyNum)
            this.sku_id = parseInt(option.sku_id)
            this.totalPrice = JSON.parse(option.price)
        }else if(option.type == 2) {
            this.allSelectedGoods = JSON.parse(option.allSelectedGoods)
            // console.log(this.allSelectedGoods)
            this.cart_ids = JSON.parse(option.cart_ids)
            this.totalPrice = JSON.parse(option.price)
        }
    },
    onShow() {
        this.getUserAddress()
        let pages = getCurrentPages();
        let currPage = pages[pages.length-1];
        if(currPage.data.addressId == ''){
            
        }else{
            this.addressId = currPage.data.addressId
            this.isHaveDefaultAddress = currPage.data.flag
        }
    }
}
</script>

<style>
    .header {
        height: 101rpx;
        background: #ffffff;
        margin-top: 15rpx;
        padding: 30rpx 0 30rpx 65rpx;
        display: flex;
        justify-content: space-between;
    }
    .user-info {
        display: flex;
        justify-content: left;
    }
    .address-mark {
        width: 65rpx;
        height: 31rpx;
        background: #24C79C;
        color: #FFFFFF;
        font-size: 22rpx;
        text-align: center;
        line-height: 30rpx;
        border-radius: 5rpx;
        margin-top: 6rpx;
        margin-right: 27rpx;
    }
    .user-name-phone {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .address {
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        margin-top: 30rpx;
    }
    .order-detail {
        background: #ffffff;
        margin-top: 25rpx;
        padding: 33rpx 46rpx 29rpx 38rpx;
        display: flex;
        justify-content: space-between;
    }
    .order-img {
        width: 241rpx;
        height: 241rpx;
    }
    .order-info {
        width: 58%;
        margin-left: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .order-info-item {
        display: flex;
        justify-content: space-between;
    }
    .order-other-info {
        background: #ffffff;
        border-top: 1rpx solid #F5F5F5;
        padding: 24rpx 37rpx 10rpx 54rpx;
    }
    .other-info-item {
        height: 87rpx;
        color: #333333;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
    }
    .choose-num {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
    }
    .choose-num-reduce,
    .choose-num-add {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background:#F4F4F4;
        text-align: center;
        line-height: 38rpx;
        color: #C8C8C8;
        font-size: 40rpx;
    }
    .choose-num-total {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 140rpx;
        background: #ffffff;
        line-height: 140rpx;
        display: flex;
        flex-direction: row-reverse;
        z-index: 99;
    }
    .bottom-button {
        width: 250rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx 35rpx 0 0;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
    }
</style>